<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>文档相似度对比</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 40px;
            background-color: #f9f9f9;
        }
        .container {
            max-width: 800px;
            margin: auto;
        }
        input[type="text"] {
            width: 100%;
            padding: 8px;
            margin-bottom: 15px;
            border-radius: 4px;
            border: 1px solid #ccc;
        }
        button {
            padding: 8px 16px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .result {
            margin-top: 30px;
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
<div class="container">
    <!-- 标题 + 返回按钮 -->
    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;">
        <a href="/"><button style="padding: 8px 16px; font-size: 16px; background-color: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer;">← 返回首页</button></a>
        <h2 style="flex: 1; text-align: center; margin: 0;">文档相似度比较</h2>
        <div style="width: 100px;"></div>
    </div>

    <!-- 输入框 -->
    <div style="display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 600px; margin: 0 auto 20px;">
        <input type="text" id="title1" placeholder="请输入第一个文档标题" style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ccc;">
        <input type="text" id="title2" placeholder="请输入第二个文档标题" style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ccc;">
    </div>

    <!-- 按钮居中 -->
    <div style="text-align: center; margin-bottom: 30px;">
        <button onclick="compareDocuments()" style="padding: 8px 16px; font-size: 16px; background-color: #007BFF; color: white; border: none; border-radius: 4px; cursor: pointer;">
            计算相似度
        </button>
    </div>

    <!-- 结果区域 -->
    <div class="result" id="results" style="display:none;">
        <h3>相似度值：<span id="similarityValue"></span></h3>
        <h4><span id="displayTitle1"></span></h4>
        <p id="doc1Content"></p>
        <h4><span id="displayTitle2"></span></h4>
        <p id="doc2Content"></p>
    </div>
</div>


<script>
    function compareDocuments() {
        const title1 = document.getElementById("title1").value.trim();
        const title2 = document.getElementById("title2").value.trim();

        if (!title1 || !title2) {
            alert("请输入两个文档标题");
            return;
        }

        fetch(`/api/similarity?title1=${encodeURIComponent(title1)}&title2=${encodeURIComponent(title2)}`)
            .then(res => res.json())
            .then(data => {
                if (data.error) {
                    alert(data.error);
                    return;
                }

                document.getElementById("similarityValue").innerText = data.similarity.toFixed(4);
                document.getElementById("displayTitle1").innerText = data.doc1.title;
                document.getElementById("displayTitle2").innerText = data.doc2.title;

                const { result1, result2 } = highlightCommonWords(data.doc1, data.doc2, data.common_words);

                document.getElementById("doc1Content").innerHTML = result1;
                document.getElementById("doc2Content").innerHTML = result2;

                document.getElementById("results").style.display = "block";
            })
            .catch(err => {
                console.error(err);
                alert("请求失败，请重试。");
            });
    }

    function highlightCommonWords(doc1, doc2, commonWords) {
        const content1 = doc1.content;
        const content2 = doc2.content;

        // 如果没有共现词，直接返回原文本
        if (!commonWords || !Array.isArray(commonWords) || commonWords.length === 0) {
            return { result1: content1, result2: content2 };
        }

        // 构建正则表达式（转义特殊字符）
        function escapeRegExp(string) {
            return string.replace(/[.*+?^${}()|[$$\\]/g, '\\$&'); // 转义正则特殊字符
        }

        const pattern = new RegExp(`(${commonWords.map(w => escapeRegExp(w)).join('|')})`, 'g');

        // 高亮函数
        function highlightText(text) {
            return text.replace(pattern, match => `<strong>${match}</strong>`);
        }

        const result1 = highlightText(content1);
        const result2 = highlightText(content2);

        return { result1, result2 };
    }



</script>
</body>
</html>
